<template>
    <div class="main-content">
        <!-- 列表页 -->
        <template v-if="showFlag">
            <el-form
                class="center-form-pv"
                :inline="true"
                :model="searchForm"
            >
                <el-row
                >
                </el-row>
            </el-form>

            <!-- <div> -->
            <el-table
                class="tables"
                :stripe="true"
                v-if="isAuth('config', '查看')"
                :data="dataList"
                v-loading="dataListLoading"
                @selection-change="selectionChangeHandler"
            >
                <el-table-column :resizable="true" type="selection" align="center" width="50"></el-table-column>
                <el-table-column :resizable="true" :sortable="true" label="序号" type="index" width="50" />
                <el-table-column :resizable="true" :sortable="true" prop="name" label="名称">
                    <template slot-scope="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column :resizable="true" :sortable="true" prop="value" width="200" label="值">
                    <template slot-scope="scope">
                        <div v-if="scope.row.value">
                            <img
                                v-if="scope.row.value.substring(0, 4) === 'http'"
                                :src="scope.row.value.split(',')[0]"
                                width="100"
                                height="100"
                            />
                            <img v-else :src="$base.url + scope.row.value.split(',')[0]" width="100" height="100" />
                        </div>
                        <div v-else>无图片</div>
                    </template>
                </el-table-column>
                <el-table-column width="300" label="操作">
                    <template slot-scope="scope">
                        <el-button
                            v-if="isAuth('config', '查看')"
                            type="success"
                            size="mini"
                            @click="addOrUpdateHandler(scope.row.id, 'info')"
                            >详情</el-button
                        >
                        <el-button
                            v-if="isAuth('config', '修改')"
                            type="primary"
                            size="mini"
                            @click="addOrUpdateHandler(scope.row.id)"
                            >修改</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="sizeChangeHandle"
                @current-change="currentChangeHandle"
                :current-page="pageIndex"
                background
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                :layout="layouts.join()"
                :total="totalPage"
                prev-text="<"
                next-text=">"
                :hide-on-single-page="true"
            ></el-pagination>
            <!-- </div> -->
        </template>

        <!-- 添加/修改页面  将父组件的search方法传递给子组件-->
        <add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>
    </div>
</template>

<script>
//$graphType1
//$buttonName1
//$subNameList1
import axios from 'axios';
import AddOrUpdate from './add-or-update';
export default {
    data() {
        return {
            searchForm: {
                key: '',
            },
            form: {},
            dataList: [],
            pageIndex: 1,
            pageSize: 10,
            totalPage: 0,
            dataListLoading: false,
            dataListSelections: [],
            showFlag: true,
            sfshVisiable: false,
            shForm: {},
            chartVisiable: false,
            chartVisiable1: false,
            chartVisiable2: false,
            chartVisiable3: false,
            chartVisiable4: false,
            chartVisiable5: false,
            addOrUpdateFlag: false,
            layouts: ['total', 'prev', 'pager', 'next', 'sizes', 'jumper'],
        };
    },
    created() {
        this.init();
        this.getDataList();
        this.contentStyleChange();
    },
    mounted() {},
    filters: {
        htmlfilter: function (val) {
            return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
        },
    },
    components: {
        AddOrUpdate,
    },
    methods: {
        contentStyleChange() {
            this.contentPageStyleChange();
        },
        // 分页
        contentPageStyleChange() {
            let arr = [];

            // if(this.contents.pageTotal) arr.push('total')
            // if(this.contents.pageSizes) arr.push('sizes')
            // if(this.contents.pagePrevNext){
            //   arr.push('prev')
            //   if(this.contents.pagePager) arr.push('pager')
            //   arr.push('next')
            // }
            // if(this.contents.pageJumper) arr.push('jumper')
            // this.layouts = arr.join()
            // this.contents.pageEachNum = 10
        },

        init() {},
        search() {
            this.pageIndex = 1;
            this.getDataList();
        },

        // 获取数据列表
        getDataList() {
            this.dataListLoading = true;
            let params = {
                page: this.pageIndex,
                limit: this.pageSize,
                sort: 'id',
                order: 'desc',
            };
            params['name'] = '%picture%';
            this.$http({
                url: 'config/page',
                method: 'get',
                params: params,
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.dataList = data.data.list;
                    this.totalPage = data.data.total;
                } else {
                    this.dataList = [];
                    this.totalPage = 0;
                }
                this.dataListLoading = false;
            });
        },
        // 每页数
        sizeChangeHandle(val) {
            this.pageSize = val;
            this.pageIndex = 1;
            this.getDataList();
        },
        // 当前页
        currentChangeHandle(val) {
            this.pageIndex = val;
            this.getDataList();
        },
        // 多选
        selectionChangeHandler(val) {
            this.dataListSelections = val;
        },
        // 添加/修改
        addOrUpdateHandler(id, type) {
            this.showFlag = false;
            this.addOrUpdateFlag = true;
            this.crossAddOrUpdateFlag = false;
            if (type !== 'info') {
                type = 'else';
            }
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id, type);
            });
        },
        // 下载
        download(file) {
            window.open(`${file}`);
        },
        // 删除
        deleteHandler(id) {
            var ids = id
                ? [Number(id)]
                : this.dataListSelections.map(item => {
                      return Number(item.id);
                  });
            this.$confirm(`确定进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.$http({
                    url: 'config/delete',
                    method: 'post',
                    data: ids,
                }).then(({ data }) => {
                    if (data && data.code === 0) {
                        this.$message({
                            message: '操作成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.search();
                            },
                        });
                    } else {
                        this.$message.error(data.msg);
                    }
                });
            });
        },
    },
};
</script>
